<template>
  <div class="system_config">
    <el-row align="middle" class="pt-5">
      <el-col :span="16">
        <p class="main_title">{{ $t("menu.SETTING") }}</p>
      </el-col>
    </el-row>
    <div class="list_setting">
      <div v-for="(title, index) in allList" :key="title.dictid">
        <div class="list_title">{{title.dictname}}&nbsp;关键词:</div>
        <div class="list_content">
          <template v-for="tag in title.valueList">
            <el-tooltip v-if="tag.value && tag.value.length > 20" :key="tag.id" class="item" effect="dark"
              :content="tag.value" placement="top">
              <el-tag class="list_tag" effect="plain" type="info" closable :disable-transitions="false"
                @close="onKeywordClose(tag.id, title.dictno, index)">{{tag.value.slice(0, 20)+ '...'}}</el-tag>
            </el-tooltip>
            <el-tag class="list_tag" effect="plain" type="info" v-else :key="tag.id" closable
              :disable-transitions="false" @close="onKeywordClose(tag.id, title.dictno, index)">{{tag.value}}</el-tag>
          </template>
          <el-input :key="title.dictid+'input'" class="input_new_tag" v-if="title.visible" v-model="title.inputValue"
            :ref="'saveInput'+index" size="small" @input="changeInput(index, title.inputValue)"
            @keyup.enter.native="onKeywordInputConfirm(index, title)"
            @blur="onKeywordInputConfirm(index, title)"></el-input>
          <el-button :key="title.dictid+'but'" v-else class="list_tag" size="small" @click="showKeywordInput(index)">+
            添加关键词</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import configService from "@/service/configService";
import { hideLoading, showLoading } from "@/utils/loading";
export default {
  data() {
    return {
      configList: [], // 配置列表
      allList: [], // 所有数据（包含配置列表和配置项列表）
      loadingArr: [], // 每个配置项加载的状态
      isLoading: false,
    };
  },
  mounted() {
    this.$store.dispatch("setActive", "11").then(() => {});
    // commit('SET_ACTIVE', 5)
    this.getConfigList();
  },
  methods: {
    // 获取配置列表
    getConfigList() {
      configService.configList({}).then((res) => {
        showLoading(".list_setting");
        if (res && res.data.result === 0 && res.data.data.length > 0) {
          this.configList = res.data.data;
          this.loadingArr = new Array(res.data.data.length).fill(true);
          hideLoading();
          this.getallList();
        }
      });
    },
    // 获取所有配置项数据
    async getallList() {
      let arr = [...this.configList];
      for (let i = 0; i < arr.length; i++) {
        let param = {
          dictno: arr[i].dictno,
          sortord: "id",
        };
        await configService.configValueList(param).then((res) => {
          if (res && res.data.result === 0) {
            arr[i].valueList = res.data.data;
            arr[i].visible = false;
            arr[i].inputValue = "";
          }
        });
      }
      this.allList = arr;
    },
    // 获取某个配置项列表
    configValueList(param, i) {
      configService.configValueList(param).then((res) => {
        if (res && res.data.result === 0) {
          let arr = [...this.configList];
          arr[i].valueList = res.data.data;
          arr[i].visible = false;
          arr[i].inputValue = "";
          this.$set(this, "allList", arr);
        }
      });
    },
    // 删除关键词
    onKeywordClose(id, dictno, index) {
      let param = { id: id };
      configService.configValueDel(param).then((res) => {
        if (res && res.data.result === 0) {
          this.$message.success("删除成功！");
          let param = {
            dictno: dictno,
            sortord: "id",
          };
          this.configValueList(param, index);
        }
      });
    },
    // 展示关键词输入框
    showKeywordInput(index) {
      let arr = [...this.allList];
      arr[index].visible = true;
      this.$set(this, "allList", arr);
      this.$nextTick(() => {
        this.$refs["saveInput" + index][0].focus();
      });
    },
    // 确认新增
    onKeywordInputConfirm(index, title) {
      if (!title.inputValue.trim()) {
        let arr = [...this.allList];
        arr[index].visible = false;
        this.$set(this, "allList", arr);
      } else {
        let param = { dictid: title.dictid, value: title.inputValue };
        configService.configValueAdd(param).then((res) => {
          if (res && res.data.result === 0) {
            this.$message.success("新增成功！");
            this.allList[index].visible = false;
            this.allList[index].inputValue = "";
            let param = {
              dictno: title.dictno,
              sortord: "id",
            };
            this.configValueList(param, index);
          }
        });
      }
    },
    // 输入参数
    changeInput(index, value) {
      let arr = [...this.allList];
      arr[index].inputValue = value;
      this.$set(this, "allList", arr);
    },
  },
};
</script>

<style>
.system_config .list_setting {
  padding: 24px;
  margin-top: 14px;
  box-sizing: border-box;
  background: #fff;
  min-height: calc(100vh - 130px);
}
.system_config .list_title {
  font-size: 14px;
  font-weight: 600;
}
.system_config .list_content {
  margin-top: 20px;
  margin-bottom: 44px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.list_tag {
  margin: 8px;
  padding: 0 15px;
  font-size: 12px;
  line-height: 40px;
  white-space: nowrap;
  border: none;
  border-radius: 4px;
  height: auto;
  background: #e9ecf2 !important;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #333333 !important;
}
.input_new_tag {
  width: 78px;
  margin: 8px;
}
.input_new_tag .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  width: 115px;
}
.el-loading-spinner {
  /* top: 20%; */
}
</style>